<template>
	<view>
		<view class="profess-body">
			<view class="chat_tip_view" :class="'chat-tip-color' + condetailData.consultation_status">
				<text class="chattip-text">{{ stateArray[condetailData.consultation_status] }}</text>
			</view>
			<view class="profess_section margintop-bar">
				<text class="profess_text">{{ showTime }}</text>
			</view>
			<view class="profess-cardbox">
				<view class="profess-preform">
					<text class="preform_title">病情描述</text>
					<view class="preform_row">
						<text class="preform_tips">基本信息</text>
						<text class="preform_text">{{ cardData.xtName || '默认名称'  }}||{{ sexname[cardData.xtGender] || '未知' }}||{{
							cardData.xtAge || '--'
						}}岁</text>
					</view>
					<view class="preform_row" v-if="false">
						<text class="preform_tips">肝肾功能</text>
						<text class="preform_text">肝功能{{ health[condetailData.patient_liver] }}||肾功能{{
							health[condetailData.patient_kidney]
						}}</text>
					</view>
					<view class="preform_row" v-if="false">
						<text class="preform_tips">孕育情况</text>
						<text class="preform_text">无</text>
					</view>
					<view class="preform_row">
						<text class="preform_tips">过敏史</text>
						<text class="preform_text">{{ cardData.allergicHistory || '暂无'}}</text>
					</view>
					<view class="preform_row">
						<text class="preform_tips">过往病史</text>
						<text class="preform_text">{{ cardData.medicalHistory || '暂无' }}</text>
					</view>
					<view class="section_line"><text class="text_line"></text></view>
				</view>

				<view class="profess-preform">
					<text class="preform_title">病情描述</text>
					<view class="preform_row">
						<text class="postform_text">主诉：{{ cardData.diseaseDescription || '暂无' }}</text>
					</view>
					<!-- 多图展示 -->
					<view class="postform_picview__files">
						<block v-for="(image, index) in condetailData.consultation_photos" :key="index">
							<view class="postform_picview">
								<image class="postform_image" :src="image" :data-src="image" @tap="previewImage" mode="aspectFill">
								</image>
							</view>
						</block>
					</view>
					<!-- 音视频预约信息 -->
					<view v-if="appoinshow">
						<view class="preform_center-line">
							<view class="center-lineview"></view>
						</view>
						<text class="preform_title">{{
							typeArray[condetailData.consultation_type]
						}}问诊预约时间</text>
						<view class="preform_row">
							<text>{{ appointime }}</text>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<u-gap></u-gap>

			<view class="profess_butview">
				<button class="profess_flex1 profess_left_button" @click="rejectConsultaion()">
					退诊
				</button>
				<button class="profess_flex1 profess_right_button" @click="updateConsultaion(2)">
					接诊
				</button>
			</view>

			<view class="profess_noteview" v-show="receiveStates">
				<text class="profess_note">温馨提示： 您已接诊，请在{{ appointime }}向患者发起语音问诊。
					如在预约时间结束前，您未于患者语音沟通，患者可要求全额退款。</text>
				<button class="profess_button" @click="reminderAction">
					设置拨打提醒
				</button>
				<view class="receiveView" v-show="condetailData.consultation_status == '1'"></view>
			</view>

		</view>

	</view>
</template>

<script>
import message from '../../api/message/message';
import {
	mapState,
	mapActions,
	mapMutations,
} from 'vuex'

function getToday(type) {
	const date = new Date();
	let month = date.getMonth() + 1;
	let day = date.getDate();
	return `${month}月${day}号`;
}
export default {
	components: {},
	data() {
		return {
			talkList: [],
			user: "",
			/* 聊天参数 */
			message: {
				type: 1,
				fromId: "",
				messageType: "0",
				messageId: "",
				toId: "",
				content: "",
				unickname: "",
				createTime: "",
				avatar: "",
			},
			myName: "",
			username: {
				your: "",
			},
			showTime: "10:00",
			condetailData: {},
			appoinshow: false,
			sexname: ["保密", "男", "女"], //0：保密，1：男；2：女
			health: ["异常", "正常"],
			healthy: ["无", "有"],
			typeArray: ["类型", "图文", "音频", "视频"],
			stateArray: [
				"●\xa0\xa0状态",
				"●\xa0\xa0等待接诊中，2小时内未接诊将自动退诊",
				"●\xa0\xa0正在咨询中，此次咨询将在24小时后结束",
				"●\xa0\xa0问诊已结束",
				"●\xa0\xa0已退诊",
			],
			form: {},
			cardData: {
				diseaseDescription: "",
			},
		};
	},
	onShow() { },
	onLoad(options) {
		if (options.data) {
			/*  */
			/* decodeURIComponent */
			let jsonData = JSON.parse(options.data);
			
			this.form.consultationOrderId = jsonData.consultationOrderId;
			
			this.form.userId = jsonData.userId;
			
			this.cardData.consultationOrderId = jsonData.consultationOrderId;
			
			this.message.fromId = uni.getStorageSync("ID")
			
			this.message.toId = this.form.userId
		}
		if (options.dis) {
			this.cardData.diseaseDescription = options.dis;
		}
		this.getList();
	},
	computed: {
		receiveStates() {

		},
		patientAge() { },
		appointime() { },
	},
	methods: {
		...mapMutations('m_message', ['saveMessageStorage']),
		/* 获取卡片 */
		async getList() {
			let re = await this.$API.messageApi.userInformation(this.form);
			this.cardData = {
				...this.cardData,
				...re,
			};
			uni.setNavigationBarTitle({
				title: this.cardData.xtName,
			});
		},
		/* 接诊 */
		updateConsultaion(restatus) {
			let that = this;
			/*  */
			let postdata = {
				conid: this.condetailData.id,
				restatus: restatus,
			};
			/* 保存订单id */
			uni.setStorageSync('orderNo',this.cardData.orderNo)
			console.log(this.cardData,"this.cardData");
			/* 取消true诊断 */
			that.clinicalReception(1);
			/* id - ID */
			that.cardData.userId = that.cardData.userid;
			//关闭当前页面
			uni.redirectTo({
				url: `/pages/online/online?data=${encodeURIComponent(
					JSON.stringify(that.cardData)
				)}`,
			});
			// this.sendMsg("患者您好，我已接诊", 1);
			return;
		},
		/* 退诊 */
		rejectConsultaion: function () {
			let that = this;
			uni.showModal({
				title: "温馨提示",
				content: "您正在执行退诊,是否确认!",
				success: function (res) {
					if (res.confirm) {
						/*  */
						that.sendMsg("患者您好，目前我没有时间，现在已经退诊问诊金额会自动退回到您的账户", 1);
						/*  */
						that.clinicalReception(3);
						uni.navigateBack();
					}
				},
			});
		},
		/*  */
		async clinicalReception(restatus) {
			this.form.status = restatus;
			let re = await this.$API.messageApi.clinicalReception(this.form);
		},
		
	
		sendMsg(data, type) {
			/* 类型 */
			this.message.type = type
			/* 内容 */
			this.message.content = data

			this.message.messageId = this.$uuid();

			this.message.readStatus = 0

			this.message.avatar = '/static/online/doctor.png'

			this.message.unickname = uni.getStorageSync("userInfo").uname

			this.message.createTime = new Date();

			let msg = {
				code: "2",
				message: this.message,
			};

			this.$ws.send(JSON.stringify(msg));

		},
		navigationAction: function () {
			uni.showModal({
				title: "温馨提示",
				content: "你确认需要退诊操作",
				success: function (res) {
					console.log(res.confirm, "res.confirm");
					if (res.confirm) {
						uni.navigateTo({
							url: "rejudge",
						});
					}
				},
			});
		},
		previewImage: function (e) {
			var current = e.target.dataset.src;
			uni.previewImage({
				current: current,
				urls: this.condetailData.consultation_photos,
			});
		},

		sendChatRoomMessage: function (sendMessage) {
			let id = WebIM.conn.getUniqueId();
			let msg = new WebIM.message("txt", id);
			console.log(id, sendMessage);
			msg.set({
				msg: sendMessage,
				from: this.username.myName,
				to: this.username.groupId,
				chatType: "chatRoom",
				success(id, serverMsgId) {
					console.log("成功了", id);
					disp.fire("em.chat.sendSuccess", id, sendMessage);
				},
				fail(id, serverMsgId) {
					console.log("失败了", id);
				},
			});
			console.log("groupchat");
			msg.setChatType("groupchat");
			WebIM.conn.send(msg.body);
			msgStorage.saveMsg(msg, "txt");
		},
		// 设置拨打提醒
		reminderAction() {
			console.log("reminderAction");
			uni.navigateTo({
				url: "picker-view?groupId=" + this.username.groupId,
			});
		},
		toggleRecordModal() {
			this.$refs.chatSuitAudio.toggleRecordModal();
		},
		normalScroll() {
			if (this.condetailData.consultation_status == "2") {
				this.$refs.chatSinglelist.normalScroll();
				this.$refs.chatInputbar.closeFunModal();
			}
		},
		shortScroll() {
			this.$refs.chatSinglelist.shortScroll();
		},
		saveSendMsg(evt) {
			msgStorage.saveMsg(evt.msg, evt.type);
			this.$refs.chatInputbar.closeFunModal();
		},
		// 取消视频通话
		cancelInviteAction(extype, recordTime) {
			console.log("cancelInviteAction", this.username);
			let uid = WebIM.conn.getUniqueId();
			let msg = new WebIM.message("custom", uid);
			msg.set({
				from: this.username.myName,
				to: this.username.groupId,
				ext: {
					extmsg: "inviteVideoAction",
					extype: extype, //1语音通话,2视频通话
					recordTime: recordTime,
					inviteCode: 0,
				},
				chatType: "chatRoom",
				success(id, serverMsgId) {
					console.log("取消视频通话成功");
				},
				fail(id, serverMsgId) {
					console.log("取消视频通话失败了", id);
				},
			});
			msg.setChatType("groupchat");
			WebIM.conn.send(msg.body);
			console.log("msg", msg);
			msgStorage.saveMsg(msg, "custom");
		},
	},
	onNavigationBarButtonTap(e) {
		let that = this;
		uni.showModal({
			title: "温馨提示",
			content: "你确认需要结单操作",
			success: function (res) {
				if (res.confirm) {
					that.updateConsultaion(3);
				}
			},
		});
	},
};
</script>

<style>
@import url("consultation.css");

page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #f7f8fa;
	min-height: 100%;
	color: #535568;
	height: auto;
}

.profess-body {
	flex-direction: column;
}

.chat_tip_view {
	top: 0;
	z-index: 888;
	display: flex;
	position: fixed;
	width: 100%;
	height: 72rpx;
	align-items: center;
}

.chattip-text {
	margin-left: 50rpx;
	font-size: 24rpx;
}

.profess_section {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	margin: 16rpx 32rpx;
}

.preform_center-line {
	display: flex;
	padding: 16rpx;
	align-items: center;
	justify-content: center;
}

.center-lineview {
	margin: 16rpx;
	background-color: #ecedef;
	width: 260rpx;
	height: 4rpx;
}

.profess_text {
	font-size: 24rpx;
	color: #bfc0c8;
}

.profess-cardbox {
	background-color: #ffffff;
	border-radius: 8rpx;
	margin: 8rpx 40rpx;
	padding: 8rpx 8rpx 36rpx;
}

.profess-preform {
	margin: 16rpx 16rpx;
}

.preform_title {
	margin: 24rpx 16rpx;
	font-size: 32rpx;
	color: #535568;
	font-weight: bold;
	letter-spacing: 2rpx;
}

.preform_row {
	display: flex;
	margin: 8rpx;
	letter-spacing: 2rpx;
}

.preform_tips {
	width: 128rpx;
	color: #9fa4ae;
	margin: 4rpx 8rpx;
}

.preform_text {
	margin: 4rpx 8rpx;
}

.postform_text {
	margin-top: 30rpx;
	width: 100%;
	margin: 4rpx 4rpx 16rpx;
	color: #9fa4ae;
	word-wrap: break-word;
	white-space: normal;
}

.section_line {
	display: flex;
	justify-content: center;
	margin: 32rpx;
}

.text_line {
	width: 256rpx;
	height: 4rpx;
	background-color: #f2f2f2;
}

.postform_picview__files {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 4rpx;
	margin-bottom: 16rpx;
	padding-top: 16rpx;
	padding-bottom: 16rpx;
}

.postform_picview {
	margin: 4rpx;
	display: block;
	width: 188rpx;
	height: 120rpx;
}

.postform_image {
	margin: 4rpx;
	display: block;
	width: 180rpx;
	height: 140rpx;
}

.profess_butview {
	display: flex;
	margin: 32rpx;
	align-items: center;
}

.profess_flex1 {
	flex: 1;
}

.profess_left_button {
	margin: 32rpx;
	color: #25b4a5;
	border-color: #25b4a5;
	letter-spacing: 8rpx;
	border-style: solid;
}

.profess_right_button {
	margin: 32rpx;
	color: #ffffff;
	letter-spacing: 8rpx;
	background-image: linear-gradient(90deg, #07c193, #3eaab4);
}

.profess_noteview {
	display: flex;
	background-color: #ecedf0;
	flex-direction: column;
	justify-content: center;
	margin: 36rpx 32rpx;
	border-radius: 8rpx;
	padding: 16rpx;
}

.profess_note {
	margin: 8rpx;
	text-align: center;
	font-size: 22rpx;
	color: #6c757d;
}

.profess_button {
	width: 92%;
	color: #ffffff;
	margin: 24rpx;
	letter-spacing: 2rpx;
	background-image: linear-gradient(90deg, #07c193, #3eaab4);
}

.receiveView {
	width: 100%;
	height: 72rpx;
}

.margintop-bar {
	margin-top: 80rpx;
}
</style>